<template>
  <div class="file-management-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">
          <el-icon class="title-icon">
            <Folder />
          </el-icon>
          文件管理
        </h2>
        <p class="page-description">管理系统文件上传和下载</p>
        </div>
      <div class="header-right">
        <div class="upload-buttons">
              <el-upload
                ref="uploadRef"
                :http-request="customUpload"
                :auto-upload="false"
                :on-change="handleFileChange"
                :before-upload="beforeUpload"
                multiple
                :show-file-list="false"
                accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip,.rar,.mp4,.mp3"
              >
            <el-button type="primary" class="upload-btn">
                  <el-icon><Upload /></el-icon>
                  选择文件
                </el-button>
              </el-upload>
          <el-button type="success" @click="submitUpload" :disabled="!hasFilesToUpload" class="submit-btn">
                <el-icon><Upload /></el-icon>
                开始上传
              </el-button>
            </div>
      </div>
        </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-filter-section">
      <div class="search-box">
        <el-input v-model="searchKeyword" placeholder="搜索文件名..." clearable @input="handleSearch"
          class="search-input">
                    <template #prefix>
                      <el-icon><Search /></el-icon>
                    </template>
                  </el-input>
      </div>
      <div class="filter-box">
        <el-select v-model="viewMode" placeholder="视图模式" clearable class="filter-select">
                    <el-option label="列表视图" value="list" />
                    <el-option label="网格视图" value="grid" />
                  </el-select>
        <el-select v-model="sortBy" placeholder="排序方式" clearable class="filter-select">
                    <el-option label="名称" value="name" />
                    <el-option label="大小" value="size" />
                    <el-option label="类型" value="type" />
                  </el-select>
        <el-button type="info" @click="resetFilters" class="reset-btn">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
                </div>
              </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon total">
          <el-icon><Folder /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ totalFiles }}</div>
          <div class="stat-label">总文件数</div>
        </div>
      </div>


      <div class="stat-card">
        <div class="stat-icon admin">
          <el-icon><Picture /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ imageFiles }}</div>
          <div class="stat-label">图片文件</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon deleted">
          <el-icon><Document /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ documentFiles }}</div>
          <div class="stat-label">文档文件</div>
        </div>
      </div>
    </div>
            
    <!-- 文件列表容器 -->
    <div class="file-list-container" v-loading="tableLoading" element-loading-text="加载中..." 
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
            
            <!-- 列表视图 -->
      <div v-if="viewMode === 'list'" class="table-container">
        <el-table :data="filteredFiles" style="width: 100%" border
          :header-cell-style="{ background: '#f8f9fa', color: '#495057', fontWeight: '600' }"
          :cell-style="{ padding: '16px 12px' }" class="file-table" table-layout="auto">
                <el-table-column type="selection" width="55" />
          <el-table-column label="文件名" min-width="300" show-overflow-tooltip>
                  <template #default="scope">
                    <div class="file-item">
                      <div class="file-icon">
                        <el-icon v-if="scope.row.type === 'image'">
                          <Picture />
                        </el-icon>
                        <el-icon v-else-if="scope.row.type === 'document'">
                          <Document />
                        </el-icon>
                        <el-icon v-else-if="scope.row.type === 'video'">
                          <VideoPlay />
                        </el-icon>
                        <el-icon v-else-if="scope.row.type === 'audio'">
                          <Headset />
                        </el-icon>
                        <el-icon v-else>
                          <Document />
                        </el-icon>
                      </div>
                      <div class="file-info">
                        <div class="file-name">{{ scope.row.name }}</div>
                        <div class="file-path">{{ scope.row.path }}</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="size" label="大小" width="120">
                  <template #default="scope">
                    {{ formatFileSize(scope.row.size) }}
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="类型" width="100">
                  <template #default="scope">
                    <el-tag :type="getFileTypeColor(scope.row.type)" size="small">
                      {{ getFileTypeText(scope.row.type) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="uploader" label="上传者" width="100" />
          <el-table-column label="操作" min-width="200" align="center" fixed="right">
                  <template #default="scope">
              <div class="action-buttons">
                <el-button type="primary" size="small" @click="downloadFile(scope.row)" class="action-btn download-btn">
                      下载
                    </el-button>
                <el-button type="info" size="small" @click="viewFileDetail(scope.row)" class="action-btn view-btn">
                      详情
                    </el-button>
                <el-button type="danger" size="small" @click="deleteFile(scope.row)" class="action-btn delete-btn">
                  删除
                </el-button>
              </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 网格视图 -->
      <div v-else-if="viewMode === 'grid'" class="grid-container">
        <div class="grid-files">
          <div v-for="file in filteredFiles" :key="file.id" class="file-card">
            <div class="file-card-header">
              <div class="file-icon-large">
                <el-icon v-if="file.type === 'image'" class="icon-image">
                      <Picture />
                    </el-icon>
                <el-icon v-else-if="file.type === 'document'" class="icon-document">
                      <Document />
                    </el-icon>
                <el-icon v-else-if="file.type === 'video'" class="icon-video">
                      <VideoPlay />
                    </el-icon>
                <el-icon v-else-if="file.type === 'audio'" class="icon-audio">
                      <Headset />
                    </el-icon>
                <el-icon v-else class="icon-default">
                      <Document />
                    </el-icon>
                  </div>
              <div class="file-type-tag">
                <el-tag :type="getFileTypeColor(file.type)" size="small">
                  {{ getFileTypeText(file.type) }}
                </el-tag>
              </div>
            </div>
            <div class="file-card-content">
              <div class="file-name-grid" :title="file.name">{{ file.name }}</div>
              <div class="file-info-grid">
                <div class="file-size">{{ formatFileSize(file.size) }}</div>
                <div class="file-uploader">{{ file.uploader }}</div>
              </div>
                  </div>
                  <div class="file-card-actions">
              <el-button type="primary" size="small" @click="downloadFile(file)" class="action-btn download-btn">
                <el-icon><Download /></el-icon>
                      下载
                    </el-button>
              <el-button type="info" size="small" @click="viewFileDetail(file)" class="action-btn view-btn">
                <el-icon><View /></el-icon>
                      详情
                    </el-button>
              <el-button type="danger" size="small" @click="deleteFile(file)" class="action-btn delete-btn">
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
          class="pagination"
              />
      </div>
    </div>

    <!-- 文件详情弹窗 -->
    <el-dialog
      v-model="fileDetailVisible"
      title="文件详情"
      width="600px"
      class="file-detail-dialog"
    >
      <div v-if="selectedFile" class="file-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="文件名">
            {{ selectedFile.name }}
          </el-descriptions-item>
          <el-descriptions-item label="文件类型">
            <el-tag :type="getFileTypeColor(selectedFile.type)" size="small">
              {{ getFileTypeText(selectedFile.type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="文件大小">
            {{ selectedFile.size > 0 ? formatFileSize(selectedFile.size) : '未知' }}
          </el-descriptions-item>
          <el-descriptions-item label="上传者">
            {{ selectedFile.uploader }}
          </el-descriptions-item>
          <el-descriptions-item label="文件路径">
            {{ selectedFile.path }}
          </el-descriptions-item>
        </el-descriptions>

        <div v-if="selectedFile.type === 'image'" class="image-preview">
          <h5>图片预览</h5>
          <div class="preview-container">
            <div class="image-placeholder">
              <el-icon size="60" color="#909399">
                <Picture />
              </el-icon>
              <p class="image-name">{{ selectedFile.name }}</p>
              <p class="image-hint">点击下载按钮查看完整图片</p>
            </div>
          </div>
        </div>

        <div class="detail-actions">
          <el-button type="primary" @click="downloadFile(selectedFile)">
            下载文件
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Upload, Refresh, Download, Search,
  Picture, Document, VideoPlay, Headset, Key, Folder,
  View, Delete
} from '@element-plus/icons-vue'
import { fileApi } from '@/api/file'

console.log('FileManagement组件已加载')

// 响应式数据
const refreshLoading = ref(false)
const tableLoading = ref(false)
const fileDetailVisible = ref(false)
const searchKeyword = ref('')
const viewMode = ref('list')
const sortBy = ref('name')
const uploadRef = ref()


// 统计数据
const totalFiles = ref(0)
const imageFiles = ref(0)
const documentFiles = ref(0)

// 分页数据
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 文件列表
const files = ref([])
const filteredFiles = ref([])
const selectedFiles = ref([])
const selectedFile = ref(null)
const filesToUpload = ref([])

// 计算属性
const hasSelected = computed(() => selectedFiles.value.length > 0)
const hasFilesToUpload = computed(() => filesToUpload.value.length > 0)

// 文件上传相关方法
const handleFileChange = (file, fileList) => {
  console.log('文件选择:', file)
  filesToUpload.value = fileList
}

const customUpload = async (options) => {
  console.log('开始上传文件:', options.file.name)
  console.log('文件大小:', options.file.size)
  console.log('文件类型:', options.file.type)
  
  try {
    const response = await fileApi.uploadFile(options.file)
    console.log('上传成功响应:', response)
    console.log('响应类型:', typeof response)
    console.log('响应内容:', JSON.stringify(response, null, 2))
    
    // 响应拦截器已经处理了Result格式，直接返回数据
    if (response) {
      ElMessage.success('文件上传成功')
      // 为新上传的文件添加信息
      const newFile = {
        id: response.data.id,
        name: response.data.name,
        path: response.data.path,
        size: options.file.size,
        type: getFileTypeFromName(response.data.name),
        uploader: '系统用户',
        url: `/api/files/${response.data.id}`
      }
      
      // 将新文件添加到列表开头
      files.value.unshift(newFile)
      filteredFiles.value = [...files.value]
      total.value = files.value.length
      
      // 更新统计数据
      totalFiles.value = files.value.length
      imageFiles.value = files.value.filter(file => file.type === 'image').length
      documentFiles.value = files.value.filter(file => file.type === 'document').length
      
      options.onSuccess(response)
    } else {
      ElMessage.error('文件上传失败')
      options.onError(new Error('文件上传失败'))
    }
  } catch (error) {
    console.error('上传失败:', error)
    console.error('错误详情:', error.response)
    ElMessage.error('文件上传失败')
    options.onError(error)
  }
  
  // 清空待上传文件列表
  filesToUpload.value = []
}

const beforeUpload = (file) => {
  const isValidSize = file.size / 1024 / 1024 < 50
  if (!isValidSize) {
    ElMessage.error('文件大小不能超过 50MB')
    return false
  }
  return true
}

// 提交上传
const submitUpload = async () => {
  if (filesToUpload.value.length === 0) {
    ElMessage.warning('请先选择文件')
    return
  }
  
  // 先测试权限
  try {
    await fileApi.testPermission()
    console.log('权限检查通过')
  } catch (error) {
    console.error('权限检查失败:', error)
    ElMessage.error('权限检查失败，请确保已登录并具有文件上传权限')
    return
  }
  
  uploadRef.value.submit()
  ElMessage.info('开始上传文件...')
}

// 刷新文件列表
const refreshFiles = async () => {
  refreshLoading.value = true
  try {
    await loadFiles()
    ElMessage.success('文件列表已刷新')
  } catch (error) {
    ElMessage.error('刷新失败')
  } finally {
    refreshLoading.value = false
  }
}

// 批量下载
const batchDownload = () => {
  if (selectedFiles.value.length === 0) {
    ElMessage.warning('请先选择要下载的文件')
    return
  }
  
  selectedFiles.value.forEach(file => {
    downloadFile(file)
  })
  
  ElMessage.success(`开始下载 ${selectedFiles.value.length} 个文件`)
}

// 下载文件
const downloadFile = async (file) => {
  try {
    const response = await fileApi.downloadFile(file.id)
    
    // 创建下载链接
    const blob = new Blob([response.data])
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = file.name
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    ElMessage.success(`开始下载文件: ${file.name}`)
  } catch (error) {
    console.error('下载失败:', error)
    ElMessage.error('下载失败')
  }
}

// 查看文件详情
const viewFileDetail = (file) => {
  selectedFile.value = file
  fileDetailVisible.value = true
}

// 删除文件
const deleteFile = async (file) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除文件 "${file.name}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await fileApi.deleteFile(file.id)
    
    // 响应拦截器已经处理了Result格式
    if (response) {
      ElMessage.success('文件删除成功')
      loadFiles() // 重新加载文件列表
    } else {
      ElMessage.error('删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 测试权限
const testPermission = async () => {
  try {
    const response = await fileApi.testPermission()
    console.log('权限测试响应:', response)
    ElMessage.success('权限检查通过')
  } catch (error) {
    console.error('权限测试失败:', error)
    ElMessage.error('权限检查失败')
  }
}

// 切换文件选择
const toggleFileSelection = (file) => {
  const index = selectedFiles.value.findIndex(f => f.id === file.id)
  if (index > -1) {
    selectedFiles.value.splice(index, 1)
  } else {
    selectedFiles.value.push(file)
  }
}

// 选择文件
const handleSelectionChange = (selection) => {
  selectedFiles.value = selection
}

// 搜索和筛选
const handleSearch = () => {
  filterFiles()
}

const resetFilters = () => {
  searchKeyword.value = ''
  viewMode.value = 'list'
  sortBy.value = 'name'
  currentPage.value = 1
}

const handleViewModeChange = () => {
  // 视图模式切换
}

const handleSortChange = () => {
  sortFiles()
}

const filterFiles = () => {
  let filtered = [...files.value]
  
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(file =>
      file.name.toLowerCase().includes(keyword)
    )
  }
  
  filteredFiles.value = filtered
  total.value = filtered.length
}

const sortFiles = () => {
  // 排序逻辑
  let sorted = [...filteredFiles.value]
  
  switch (sortBy.value) {
    case 'name':
      sorted.sort((a, b) => a.name.localeCompare(b.name))
      break
    case 'size':
      sorted.sort((a, b) => b.size - a.size)
      break
    case 'type':
      sorted.sort((a, b) => a.type.localeCompare(b.type))
      break
  }
  
  filteredFiles.value = sorted
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 加载文件列表
const loadFiles = async () => {
  tableLoading.value = true
  try {
    const response = await fileApi.getFiles()
    console.log('文件列表响应:', response)
    
    // 后端直接返回文件列表数组，不是包装在Result中
    const fileList = response || []
    files.value = fileList.map(file => ({
      id: file.id,
      name: file.name,
      path: file.path,
      size: file.size || 0, // 使用后端返回的size字段，如果没有则为0
      type: getFileTypeFromName(file.name),
      uploader: '系统用户', // 后端没有返回上传者信息
      url: `/api/files/${file.id}` // 下载链接
    }))
      filteredFiles.value = [...files.value]
      total.value = files.value.length
      
      // 更新统计数据
      totalFiles.value = files.value.length
    imageFiles.value = files.value.filter(file => file.type === 'image').length
    documentFiles.value = files.value.filter(file => file.type === 'document').length
  } catch (error) {
    console.error('加载文件列表失败:', error)
    ElMessage.error('加载文件列表失败')
  } finally {
    tableLoading.value = false
  }
}

// 根据文件名判断文件类型
const getFileTypeFromName = (fileName) => {
  if (!fileName || typeof fileName !== 'string') {
    return 'document'
  }
  
  const extension = fileName.toLowerCase().split('.').pop()
  const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
  const documentTypes = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'txt', 'ppt', 'pptx']
  const videoTypes = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv']
  const audioTypes = ['mp3', 'wav', 'flac', 'aac', 'ogg']
  
  if (imageTypes.includes(extension)) return 'image'
  if (documentTypes.includes(extension)) return 'document'
  if (videoTypes.includes(extension)) return 'video'
  if (audioTypes.includes(extension)) return 'audio'
  return 'document'
}



// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}



// 获取文件类型颜色
const getFileTypeColor = (type) => {
  const colors = {
    image: 'success',
    document: 'warning',
    video: 'danger',
    audio: 'info'
  }
  return colors[type] || 'info'
}

// 获取文件类型文本
const getFileTypeText = (type) => {
  const texts = {
    image: '图片',
    document: '文档',
    video: '视频',
    audio: '音频'
  }
  return texts[type] || '文件'
}

// 初始化
onMounted(async () => {
  console.log('FileManagement组件已挂载')
  
  // 加载文件列表
  await loadFiles()
})
</script>

<style scoped>
.file-management-container {
  width: 100%;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  background: #f5f7fa;
  margin: 0;
  overflow-y: auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.header-left {
  flex: 1;
  margin-right: 20px;
}

.header-right {
  flex-shrink: 0;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  color: #303133;
  margin: 0 0 5px 0;
}

.title-icon {
  margin-right: 8px;
  font-size: 1.8rem;
  color: #409eff;
}

.page-description {
  font-size: 0.9rem;
  color: #606266;
  margin: 0;
}

.upload-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.upload-btn {
  height: 40px;
  padding: 0 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.submit-btn {
  height: 40px;
  padding: 0 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  gap: 15px;
}

.search-box {
  flex: 1;
  min-width: 300px;
}

.search-input {
  width: 100%;
}

.filter-box {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.filter-select {
  width: 120px;
}

.reset-btn {
  height: 40px;
  padding: 0 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  background: #f8f9fa;
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  font-size: 2.5rem;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(64, 158, 255, 0.1);
}

.stat-icon.total {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}

.stat-icon.active {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.stat-icon.locked {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
}

.stat-icon.admin {
  color: #909399;
  background: rgba(144, 147, 153, 0.1);
}

.stat-icon.deleted {
  color: #e6a23c;
  background: rgba(230, 162, 60, 0.1);
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.8rem;
  color: #909399;
  margin: 0;
}

.table-container {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 16px 20px;
  min-height: 300px;
}

.file-table {
  width: 100%;
  flex: 1;
}

.file-table :deep(.el-table__header-wrapper) {
  background: #f5f7fa;
}

.file-table :deep(.el-table__body-wrapper) {
  overflow: auto;
  min-height: 300px;
}

.file-table :deep(.el-table__row) {
  transition: background-color 0.3s ease;
}

.file-table :deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
}

.file-info {
  flex: 1;
}

.file-name {
  font-weight: 600;
  color: #303133;
  margin-bottom: 2px;
}

.file-path {
  color: #7f8c8d;
  font-size: 12px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.action-btn {
  margin: 0 1px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.action-btn.download-btn {
  background-color: #409eff;
  border-color: #409eff;
}

.action-btn.view-btn {
  background-color: #67c23a;
  border-color: #67c23a;
}

.action-btn.delete-btn {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

/* 确保表格完整显示 */
.file-table :deep(.el-table) {
  width: 100% !important;
  height: auto !important;
  display: table !important;
  table-layout: auto !important;
}

.file-table :deep(.el-table__body) {
  width: 100% !important;
  height: auto !important;
}

.file-table :deep(.el-table__header) {
  width: 100% !important;
  height: auto !important;
}

/* 确保表格列宽度正确 */
.file-table :deep(.el-table__column) {
  min-width: 0;
}

/* 确保表格内容不被截断 */
.file-table :deep(.el-table__cell) {
  padding: 12px 8px !important;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* 确保操作按钮正确显示 */
.file-table :deep(.el-button) {
  margin: 2px;
  min-width: 60px;
}

/* 确保标签正确显示 */
.file-table :deep(.el-tag) {
  margin: 0;
  display: inline-block;
}

/* 网格视图样式 */
.grid-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.grid-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 10px 0;
}

.file-card {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.file-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

.file-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.file-icon-large {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
}

.icon-image {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.icon-document {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.icon-video {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.icon-audio {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.icon-default {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.file-type-tag {
  flex-shrink: 0;
}

.file-card-content {
  margin-bottom: 16px;
}

.file-name-grid {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-info-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.file-size {
  font-weight: 500;
}

.file-uploader {
  font-weight: 500;
}

.file-card-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.file-card-actions .action-btn {
  flex: 1;
  height: 32px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .file-management-container {
    padding: 15px;
  }

  .page-header {
    margin-bottom: 15px;
    padding: 15px;
  }

  .search-filter-section {
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .search-box {
  width: 100%;
    min-width: auto;
  }

  .filter-box {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }

  .filter-select {
    width: 120px;
  }

  .stats-cards {
    padding: 15px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .file-table :deep(.el-table__cell) {
    padding: 8px 6px !important;
  }
}

@media (max-width: 768px) {
  .file-management-container {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 15px;
  }
  
  .upload-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .upload-btn, .submit-btn {
    width: 100%;
  }

  .search-filter-section {
    padding: 10px;
  }

  .filter-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .filter-select {
    width: 100%;
  }

  .reset-btn {
    width: 100%;
  }

  .stats-cards {
    padding: 10px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .file-table :deep(.el-table__cell) {
    padding: 4px 2px !important;
  }

  .grid-files {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
  }

  .file-card {
    padding: 12px;
  }

  .file-icon-large {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .file-card-actions .action-btn {
    height: 28px;
    font-size: 11px;
  }

  .action-btn {
    height: 20px;
    padding: 0 6px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .file-management-container {
    padding: 8px;
  }

  .page-header {
    padding: 12px;
  }

  .search-filter-section {
    padding: 8px;
  }

  .stats-cards {
    padding: 8px;
    grid-template-columns: 1fr;
  }

  .file-table :deep(.el-table__cell) {
    padding: 2px 1px !important;
    font-size: 11px;
  }

  .grid-files {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .file-card {
    padding: 10px;
  }
  
  .file-icon-large {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .file-name-grid {
    font-size: 13px;
  }

  .file-info-grid {
    font-size: 11px;
  }

  .file-card-actions .action-btn {
    height: 26px;
    font-size: 10px;
  }

  .action-btn {
    height: 18px;
    padding: 0 4px;
    font-size: 9px;
  }
}

/* 文件详情对话框样式 */
.file-detail-dialog {
  border-radius: 16px;
}

.file-detail {
  padding: 20px 0;
}

.image-preview {
  margin: 20px 0;
}

.image-preview h5 {
  margin-bottom: 10px;
  color: #2c3e50;
  font-size: 16px;
}

.preview-container {
  text-align: center;
}

.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #d1d5db;
}

.image-name {
  margin: 10px 0 5px 0;
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.image-hint {
  margin: 0;
  color: #909399;
  font-size: 12px;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.detail-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
</style>